<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts--柱线混合图demo</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
    <script src="echarts/echarts.js"></script>
    <style>
        body {background:#00a0e9;}
        #SubMara {width:800px; height:400px; margin:30px auto;}
    </style>
</head>
<body>
    <div id="SubMara"></div>

    <script>
            /**
            * 柱线混合图：通常是采用两个yAxis来实现对应的数据显示
            */
            var SubMara = echarts.init(document.getElementById("SubMara"));//----->绘制Echarts区域【须指明宽高】
            var res = [];
            res.push(123,123,234,34,246,4326,265,234,2345,234,12,123,123,123,54,643,24,32,56,78)
            var option1 = {
                grid:{
                    left:"60px",
                    right:"100px"
                },
                /*时间轴的动态生成*/
                xAxis:[
                    {
                        type:"category",
        //                data:(()=>{
        //                    let res = [123,123,234,34,246,4326,265,234,2345,234,12,123,123,123,54,643,24,32,56,78];
        //                    return res;
        //                })(),
                        data:res,
                        axisLabel:{
                            interval:4,
                            textStyle:{color:"#fff",fontSize:"25"}
                        },
                        axisLine:{
                            lineStyle:{
                                color:"#fff",
                                opacity:1
                            }
                        },
                        axisTick:{
                            show:false
                        }
                    }
                ],
                /*场次和金额两个纵轴维度*/
                yAxis:[
                    {
                        name:"场次(场)",
                        nameGap:30,
                        nameTextStyle:{
                            fontSize:"30"
                        },
                        type:"value",
                        max:250,
                        min:0,
                        boundaryGap:[-0.5,0],
                        axisLabel:{
                            textStyle:{color:"#fff",fontSize:"25"},
                        },
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#fff",
                                opacity:1
                            }
                        },
                        axisTick:{
                            show:false,
                        },
                        splitLine:{
                            show:false
                        },

                    },
                    {
                        name:"金额(亿)",
                        nameGap:30,
                        nameTextStyle:{
                            fontSize:"30"
                        },
                        type:"value",
                        max:5,
                        min:0,
                        axisLabel:{
                            textStyle:{color:"#fff",fontSize:"25"},
                            formatter:"{value}  (亿)"
                        },
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:"#fff",
                                opacity:1
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        }
                    }

                ],
                /*柱状图和折线图两个维度数据*/
                series:[
                    {
                        name:"场次",
                        type:"bar",
                        barWidth:30,
                        grid:{
                            x:"20%",
                            bottom:"3%"
                        },
                        animationDelay:function(idx){
                            return idx * 100;
                        },
                        nametextStyle:{color:"#fff"},
                        data:[205,148,189,156,192,184,220,190,195,198,188,212,203,167,171,188,212,203,167,171],
                        itemStyle:{
                            normal:{
                                color:new echarts.graphic.LinearGradient(0,0,0,.9,[
                                    {offset:0,color:"#1ee47b"},{offset:1,color:"#1d82ff"}
                                ]),
                                label:{
                                    show:true,
                                    position:"top",
                                    textStyle:{color:"#fff",fontSize:"30"}
                                }
                            }
                        }
                    },
                    {
                        name:"金额",
                        yAxisIndex:1,
                        type:"line",
                        symbol:"circle",
                        animationDelay:2800,
                        symbolSize:20,
                        data:[2.3,1.8,1.9,1.7,2.1,1.7,1.85,1.1,1.5,0.5,0.6,1.3,0.8,1.1,0.9,0.7,1.2,0.8,1.1,0.9],
                        itemStyle:{
                            normal:{
                                color:"#febc6e",
                                lineStyle:{color:"#febc6e",width:5}
                            }
                        }
                    }
                ]
            }
            SubMara.setOption(option1);

    </script>
</body>
</html>
